<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用bootstrap绘制form表单</title>
    <!-- Bootstrap core CSS -->
    <link
            href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
            rel="stylesheet">
    <link
            href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
            rel="stylesheet">
    <!-- bootstrap-datepicker-1.9.0-dist -->
    <link
            href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
            rel="stylesheet">

    <!-- Bootstrap core JavaScript-->
    <!-- Placed at the end of the document so the pages load faster -->
    <!--import jquery before bootstrap javascript-->
    <script
            src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script
            src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!-- bootstrap-datepicker-1.9.0-dist -->
    <script
            src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>

    <script
            src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    <!-- My97DatePicker -->
    <script
            src="${pageContext.servletContext.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>



    <script type="text/javascript">
        // 给日期输入框添加事件处理
        $(function() {
            $("#txtCreateDate1").datepicker({
                format : "yyyy-mm-dd",
                language : "fr",
                todayBtn : true
            });
        });

        // 删除按钮点击触发的事件:用于发送删除请求
        function deleteMe(userId){
            // 使用确认框，确认用户是否需要进行删除操作
            var r=confirm("您确认删除该记录么?")
            if (r==true){
                // 使用get方式发送请求
                window.location.href = "UserInfoDeletingControl?uid=" + userId;
            }

        }
    </script>

    <style>
        #maindiv {
            width: 80%;
            padding-top: 10px;
            /* margin: 0px, auto; */
            padding-left: 50px;
        }
    </style>
</head>
<body>
<div id="maindiv">
    <div>
        <form class="form-horizontal"
              action="${pageContext.servletContext.contextPath}/adminInfoQueryingAction"
              method="post">
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txtUserName"
                           name="adminuser" placeholder="请输入用户名">
                </div>

                <label class="col-sm-2 control-label">创建日期</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control" id="txtCreateDate"
                           name="admincreatedate" onClick="WdatePicker()" placeholder="开始日期">

                    <input type="text" class="form-control" id="txtCreateDate1"
                           name="admincreatedate2" placeholder="结束日期">
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-2">
                    <button type="submit" class="btn btn-default">查询</button>
                </div>
                <div class="col-sm-offset-4 col-sm-2">
                    <button type="reset" class="btn btn-default">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 显示查询结果部分-->
    <div class="row">

        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>创建日期</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <!-- foreach标签的 items属性绑定的是被遍历的集合对象；
   var 属性中存储的是每次从items里面取出的值；
   varStatus保存了foreach标签遍历是的各种属性特征值：例如当前遍历的值是结果集items中的第几个，奇数个；偶数个；遍历的总数 -->
            <c:forEach items="${lstQueryUserInfos}" var="eachBean"
                       varStatus="st">
                <tr>
                    <th scope="row">${st.index+1}</th>
                    <td>${eachBean.adminuser}</td>
                    <td><fmt:formatDate value="${eachBean.admincreatedate}"
                                        pattern="yyyy-MM-dd HH:mm:ss"/></td>
                    <td><a href="${pageContext.servletContext.contextPath}/UserInfoModifyJumpControl?uid=${eachBean.adminid}">修改</a></td>
                    <td><button type="button" class="btn btn-default"
                                onclick="deleteMe(${eachBean.adminid})">删除</button></td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>
